﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KPIBreakDownForm.aspx.cs"
    Inherits="FBKPI.Forms.KPIBreakDownForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#btn_close").click(function () {
                parent.$("#divdetail").dialog("close");
                return false;
            });

            if ($("#txt_mode").val() != 'create') {
                $("#btn_BrowseGroupKPI").hide();
                $("#btn_BrowseCategoryKPI").hide();
                $("#btn_BrowseTypeKPI").hide();
                $("#btn_BrowseSubTypeKPI").hide();

                $("#txt_year").attr('readonly', 'readonly');

            }

            $("#divBrowseGroupKPI").hide();
            $("#divBrowseGroupKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseCategoryKPI").hide();
            $("#divBrowseCategoryKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseTypeKPI").hide();
            $("#divBrowseTypeKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseSubTypeKPI").hide();
            $("#divBrowseSubTypeKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseUOM").hide();
            $("#divBrowseUOM").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseUOMMax").hide();
            $("#divBrowseUOMMax").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseUOMMin").hide();
            $("#divBrowseUOMMin").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseKPIParent").hide();
            $("#divBrowseKPIParent").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
            $("#divBrowseKPIReplacement").hide();
            $("#divBrowseKPIReplacement").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseSuperior").hide();
            $("#divBrowseSuperior").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            if ($("#txt_groupkpi").val() == '') {
                $("#btn_BrowseCategoryKPI").attr("disabled", true);
            }
            if ($("#txt_categorykpi").val() == '') {
                $("#btn_BrowseTypeKPI").attr("disabled", true);
            }
            if ($("#txt_typekpi").val() == '') {
                $("#btn_BrowseSubTypeKPI").attr("disabled", true);
            }
            if ($("#txt_uom").val() == '') {
                $("#btn_BrowseUOMMax").attr("disabled", true);
                $("#btn_BrowseUOMMin").attr("disabled", true);
            }

            $("#txt_replacementdate").datepicker({ dateFormat: 'dd/mm/yy' })

            $("#btn_save").click(function () {
                var param = "?";
                var isActive = 'false';
                var weightenable = 'false';
                var uomenable = 'false';

                $('#form1 td input:checked').each(function () {
                    var $cb = $(this);
                    if ($cb.attr('id') == 'chk_active') {
                        isActive = 'true';
                    }
                    if ($cb.attr('id') == 'chk_weightenableflag') {
                        weightenable = 'true';
                    }
                    if ($cb.attr('id') == 'chk_uomenableflag') {
                        uomenable = 'true';
                    }
                });

                param = param + "action=save";
                //param = param + "&ID=" + $("#txt_id").val();
                param = param + "&ID=" + $("#hfId").val();
                param = param + "&Description=" + $("#txt_description").val();
                param = param + "&isActive=" + isActive;
                param = param + "&weightEnable=" + weightenable;
                param = param + "&uomEnable=" + uomenable;
                param = param + "&GroupKPI=" + $("#txt_groupkpiid").val();
                param = param + "&CategoryKPI=" + $("#txt_categorykpiid").val();
                param = param + "&TypeKPI=" + $("#txt_typekpiid").val();
                param = param + "&SubTypeKPI=" + $("#txt_subtypekpiid").val();
                param = param + "&UOM=" + $("#txt_uomid").val();
                param = param + "&UOMMax=" + $("#txt_uommaxid").val();
                param = param + "&UOMMin=" + $("#txt_uomminid").val();
                param = param + "&KPIParent=" + $("#txt_kpiparentid").val();
                param = param + "&KPIReplacement=" + $("#txt_kpireplacementid").val();
                param = param + "&Year=" + $("#txt_year").val();
                param = param + "&Weight=" + $("#txt_weight").val();
                param = param + "&Periode=" + $("#txt_periode").val();
                param = param + "&Polarization=" + $("#txt_polarization").val();
                param = param + "&TargetDescription=" + $("#txt_targetdescription").val();
                param = param + "&ManualCalculation=" + $("#txt_manualcalculation").val();
                param = param + "&CalculationType=" + $("#txt_calculationtype").val();
                param = param + "&ReplacementDate=" + $("#txt_replacementdate").val();
                param = param + "&ReplacementDescription=" + $("#txt_replacementdescription").val();
                param = param + "&DetailInformation=" + $("#txt_detailinformation").val();
                param = param + "&StrategicObjective=" + $("#txt_strategicobjective").val();
                param = param + "&CurrUser=" + $("#txt_user").val();
                param = param + "&EmployeeIDVerifier=" + $("#txt_superiorid").val();
                param = param + "&FlagInsertKPIUser=User";
                ProcessRequest("KPIHandler.ashx" + param.replace("undefined", ""), "#divdetail", "#KPITable");
                return false;
            });


            $("#btn_delete").click(function () {
                if (confirm('Are you sure to delete this record?')) {
                    var param = "?";
                    param = param + "action=delete";
                    param = param + "&ID=" + $("#hfId").val();
                    param = param + "&CurrUser=" + $("#txt_user").val();
                    ProcessRequest("KPIHandler.ashx" + param, "#divdetail", "#KPITable");
                    return false;
                }
                return false;
            });


            //browse employe verifier
            $("#btn_BrowseSuperior").click(function () {
                $("#divBrowseSuperior").dialog("option", "title", '<span class="header-text">Select Superior</span>');
                $("#divBrowseSuperior").dialog("open");
                $('#superior').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/EmployeeHierarchySerializer.ashx?CurrUser=" + $("#txt_user").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "FirstName" },
                        { "mData": "LastName" },
                        { "mData": "Department" },
                        { "mData": "Section" },
                        { "mData": "SubSection" },
                        { "mData": "JobPosition" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickSuperior('" + oObj.aData["ID"] + "','" + oObj.aData["FirstName"] + " " + oObj.aData["LastName"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [7]
                        },
                        { "sClass": "center", "aTargets": [0, 7] }
                    ]
                });

                //mark selected row
                $('body').on("click", '#superior tbody tr', function () {
                    $('#superior tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickSuperior = function (SuperiorID, SuperiorName) {
                $("#txt_superior").val(SuperiorName);
                $("#txt_superiorid").val(SuperiorID);
                $("#divBrowseSuperior").dialog("close");
            }
            //end browse superior


            $("#btn_BrowseGroupKPI").click(function () {
                $("#divBrowseGroupKPI").dialog("option", "title", '<span class="header-text">Select Group KPI</span>');
                $("#divBrowseGroupKPI").dialog("open");
                $('#groupkpi').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/GroupKPISerializer.ashx",
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickGroupKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#groupkpi tbody tr', function () {
                    $('#groupkpi tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickGroupKPI = function (GroupID, GroupDescription) {
                $("#txt_groupkpi").val(GroupDescription);
                $("#txt_groupkpiid").val(GroupID);
                $("#divBrowseGroupKPI").dialog("close");
                $("#btn_BrowseCategoryKPI").attr("disabled", false);
            }



            $("#btn_BrowseCategoryKPI").click(function () {
                $("#divBrowseCategoryKPI").dialog("option", "title", '<span class="header-text">Select Category KPI</span>');
                $("#divBrowseCategoryKPI").dialog("open");
                $('#categorykpi').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/CategoryKPIByGroupKPISerializer.ashx?GroupKPI=" + $("#txt_groupkpiid").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickCategoryKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#categorykpi tbody tr', function () {
                    $('#categorykpi tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickCategoryKPI = function (CategoryID, CategoryDescription) {
                $("#txt_categorykpi").val(CategoryDescription);
                $("#txt_categorykpiid").val(CategoryID);
                $("#divBrowseCategoryKPI").dialog("close");
                $("#btn_BrowseTypeKPI").attr("disabled", false);
            }



            $("#btn_BrowseTypeKPI").click(function () {
                $("#divBrowseTypeKPI").dialog("option", "title", '<span class="header-text">Select Type KPI</span>');
                $("#divBrowseTypeKPI").dialog("open");
                $('#typekpi').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/TypeKPIByCategoryKPISerializer.ashx?CategoryKPI=" + $("#txt_categorykpiid").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickTypeKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#typekpi tbody tr', function () {
                    $('#typekpi tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickTypeKPI = function (TypeID, TypeDescription) {
                $("#txt_typekpi").val(TypeDescription);
                $("#txt_typekpiid").val(TypeID);
                $("#divBrowseTypeKPI").dialog("close");
                $("#btn_BrowseSubTypeKPI").attr("disabled", false);
            }



            $("#btn_BrowseSubTypeKPI").click(function () {
                $("#divBrowseSubTypeKPI").dialog("option", "title", '<span class="header-text">Select Sub Type KPI</span>');
                $("#divBrowseSubTypeKPI").dialog("open");
                $('#subtypekpi').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/SubTypeKPIByTypeKPISerializer.ashx?TypeKPI=" + $("#txt_typekpiid").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickSubTypeKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#subtypekpi tbody tr', function () {
                    $('#subtypekpi tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickSubTypeKPI = function (SubTypeID, SubTypeDescription) {
                $("#txt_subtypekpi").val(SubTypeDescription);
                $("#txt_subtypekpiid").val(SubTypeID);
                $("#divBrowseSubTypeKPI").dialog("close");
            }

            $("#btn_BrowseUOM").click(function () {
                $("#divBrowseUOM").dialog("option", "title", '<span class="header-text">Select Unit of Measure</span>');
                $("#divBrowseUOM").dialog("open");
                $('#uom').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/UoMSerializer.ashx",
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOM('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#uom tbody tr', function () {
                    $('#uom tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickUOM = function (UOMID, UOMDescription) {
                $("#txt_uom").val(UOMDescription);
                $("#txt_uomid").val(UOMID);
                $("#divBrowseUOM").dialog("close");
                $("#btn_BrowseUOMMax").attr("disabled", false);
                $("#btn_BrowseUOMMin").attr("disabled", false);
                $("#txt_uommax").val('');
                $("#txt_uommaxid").val('');
                $("#txt_uommin").val('');
                $("#txt_uomminid").val('');
            }



            $("#btn_BrowseUOMMax").click(function () {
                $("#divBrowseUOMMax").dialog("option", "title", '<span class="header-text">Select UoM Max</span>');
                $("#divBrowseUOMMax").dialog("open");
                $('#uommax').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/UoMDetailByUoMIDSerializer.ashx?UoM=" + $("#txt_uomid").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "ListValue" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOMMax('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [4]
                        },
                        { "sClass": "center", "aTargets": [0, 3, 4] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [3]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#uommax tbody tr', function () {
                    $('#uommax tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickUOMMax = function (UOMID, UOMDescription) {
                $("#txt_uommax").val(UOMDescription);
                $("#txt_uommaxid").val(UOMID);
                $("#divBrowseUOMMax").dialog("close");
            }



            $("#btn_BrowseUOMMin").click(function () {
                $("#divBrowseUOMMin").dialog("option", "title", '<span class="header-text">Select UoM Min</span>');
                $("#divBrowseUOMMin").dialog("open");
                $('#uommin').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/UoMDetailByUoMIDSerializer.ashx?UoM=" + $("#txt_uomid").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "ListValue" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOMMin('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [4]
                        },
                        { "sClass": "center", "aTargets": [0, 3, 4] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [3]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#uommin tbody tr', function () {
                    $('#uommin tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickUOMMin = function (UOMID, UOMDescription) {
                $("#txt_uommin").val(UOMDescription);
                $("#txt_uomminid").val(UOMID);
                $("#divBrowseUOMMin").dialog("close");
            }

            $("#btn_BrowseKPIParent").click(function () {
                $("#divBrowseKPIParent").dialog("option", "title", '<span class="header-text">Select KPI</span>');
                $("#divBrowseKPIParent").dialog("open");
                $('#kpiparent').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=",
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickKPIParent('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#kpiparent tbody tr', function () {
                    $('#kpiparent tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickKPIParent = function (KPIParentID, KPIParentDescription) {
                $("#txt_kpiparent").val(KPIParentDescription);
                $("#txt_kpiparentid").val(KPIParentID);
                $("#divBrowseKPIParent").dialog("close");
            }


            $("#btn_BrowseKPIReplacement").click(function () {
                $("#divBrowseKPIReplacement").dialog("option", "title", '<span class="header-text">Select KPI</span>');
                $("#divBrowseKPIReplacement").dialog("open");
                $('#kpireplacement').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=",
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickKPIReplacement('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#kpireplacement tbody tr', function () {
                    $('#kpireplacement tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickKPIReplacement = function (KPIReplacementID, KPIReplacmentDescription) {
                $("#txt_kpireplacement").val(KPIReplacmentDescription);
                $("#txt_kpireplacementid").val(KPIReplacementID);
                $("#divBrowseKPIReplacement").dialog("close");
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="kpiformarea" class="ui-widget-content padding5px ui-corner-all">
        <table class="dialogTable" width="100%">
            <tr>
                <td width="50%">
                    <input type="hidden" id="txt_mode" runat="server" />
                    <table>
                        <tr runat="server" visible="false">
                            <td width="140px">
                                ID
                            </td>
                            <td class="Separator">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_id" runat="server" ReadOnly="true"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Description
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_description" runat="server" class="longText mandatory"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Group
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_groupkpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseGroupKPI" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_groupkpiid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Category
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_categorykpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseCategoryKPI" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_categorykpiid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Type
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_typekpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseTypeKPI" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_typekpiid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Sub Type
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_subtypekpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseSubTypeKPI" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_subtypekpiid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Year
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_year" runat="server" class="mandatory"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Periode
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_periode" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Polarization
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_polarization" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Unit of Measure
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_uom" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseUOM" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_uomid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                UoM Max
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_uommax" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseUOMMax" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_uommaxid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                UoM Min
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_uommin" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseUOMMin" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_uomminid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Employee Verifier
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_superior" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                <button id="btn_BrowseSuperior" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_superiorid" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="50%">
                    <table>
                        <tr>
                            <td width="140px">
                                Target Description
                            </td>
                            <td class="Separator">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_targetdescription" runat="server" class="longText"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Manual Calculation
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_manualcalculation" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Calculation Type
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_calculationtype" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Weight
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_weight" runat="server" class="mandatory"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                KPI Parent
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_kpiparent" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                <button id="btn_BrowseKPIParent" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_kpiparentid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                KPI Replacement
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_kpireplacement" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                <button id="btn_BrowseKPIReplacement" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <input type="hidden" id="txt_kpireplacementid" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Replacement Date
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_replacementdate" runat="server" ReadOnly="true"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Replacement Desc.
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_replacementdescription" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Weight Enable Flag
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:CheckBox ID="chk_weightenableflag" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                UoM Enable Flag
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:CheckBox ID="chk_uomenableflag" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Detail Information
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_detailinformation" runat="server" class="longText"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Strategic Objective
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_strategicobjective" runat="server" class="longText"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                is Active
                            </td>
                            <td>
                                :
                            </td>
                            <td>
                                <asp:CheckBox ID="chk_active" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <br />
    <%--  <div id="AuditInformation" class="ui-widget-content padding5px ui-corner-all">
        <b style="margin-left: 5px">Audit Information</b>
        <table class="dialogTable">
            <tr>
                <td width="140px">
                    Last Modified Date
                </td>
                <td class="Separator">
                    :
                </td>
                <td>
                    <asp:TextBox ID="txt_lastmodifieddate" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Last Modified By
                </td>
                <td>
                    :
                </td>
                <td>
                    <asp:TextBox ID="txt_lastmodifiedby" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Create Date
                </td>
                <td>
                    :
                </td>
                <td>
                    <asp:TextBox ID="txt_createdate" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Create By
                </td>
                <td>
                    :
                </td>
                <td>
                    <asp:TextBox ID="txt_createby" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>--%>
    <div id="divBrowseGroupKPI" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="groupkpi">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseCategoryKPI" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="categorykpi">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseTypeKPI" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="typekpi">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseSubTypeKPI" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="subtypekpi">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseUOM" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="uom">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseUOMMax" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="uommax">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Value
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseUOMMin" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="uommin">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Value
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseKPIParent" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="kpiparent">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseKPIReplacement" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="kpireplacement">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
     <div id="divBrowseSuperior" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="superior">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Department
                    </th>
                    <th>
                        Section
                    </th>
                    <th>
                        Sub Section
                    </th>
                    <th>
                        Job Position
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <br />
    <button id="btn_save" class="button save" runat="server" name="btnSave">
        Save
    </button>
    <button id="btn_delete" class="button delete" runat="server" name="btnSave">
        Delete
    </button>
    <button id="btn_close" class="button close" runat="server">
        Close
    </button>
    <asp:HiddenField ID="hfId" runat="server" Value="0" />
    </form>
</body>
</html>
